<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="维保信息" width="50%" append-to-body>
      <el-form ref="form" :model="formData" :rules="rules" label-width="130px" class="dialog-form-two">

        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model.trim="formData.supplier" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商联系人" prop="supplierContact">
              <el-input v-model.trim="formData.supplierContact" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model.trim="formData.contactPhone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="userId">
              <user-select v-model="formData.userId"></user-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item label="保养到期时间" prop="deadlineTime">
              <el-date-picker style="width: 100%;" v-model="formData.deadlineTime"
                value-format="YYYY-MM-DD"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="折旧期限（月）" prop="depreciation">
              <el-input v-model.trim="formData.depreciation" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script setup>

import api from "./api.js";
import UserSelect from "@/components/User/UserSelect.vue";

const { proxy } = getCurrentInstance();

const emit = defineEmits(["sub"]);

// form表单的引用
const form = ref();

const openFlag = ref(false);

// 资产ID
let itemId = null;

// 表单的初始参数
const formDataInit = {
  id: null,
  supplier: null,
  supplierContact: null,
  contactPhone: null,
  userId: null,
  deadlineTime: null,
  depreciation: null,
}

// 表单参数
const formData = reactive({ ...formDataInit });

// 表单规则
const rules = {
  supplier: [
    { required: true, message: "不能为空", trigger: "blur" }
  ],
  supplierContact: [
    { required: true, message: "供应商联系人不能为空", trigger: "blur" }
  ],
  contactPhone: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: "联系电话格式不正确", trigger: "blur" }
  ],
  userId: [
    { required: true, message: "负责人不能为空", trigger: "change" }
  ],
  deadlineTime: [
    { required: true, message: "保养到期时间不能为空", trigger: "change" },

  ],
  depreciation: [
    { required: true, message: "折旧期限不能为空", trigger: "blur" },
    { pattern: /^[1-9]\d*$/, message: "折旧期限必须为正整数", trigger: "blur" }
  ]

}

function reset() {
  Object.assign(formData, formDataInit);
}

// 打开窗口
function open(row) {
  openFlag.value = true;
  // 资产ID赋值
  itemId = row.id;
  debugger
  reset();

  let maintenance = row.maintenance;
  // 判断是否有维保信息
  if (maintenance) {
    const id = maintenance.id;
    api.getDetail(id).then(response => {
      Object.assign(formData, response);
    });
  }

}

// 关闭窗口
function close() {
  openFlag.value = false;
}

function check() {
  return new Promise(resolve => {
    form.value.validate(valid => {
      resolve(valid);
    })
  })
}

/** 提交按钮 */
async function submitForm() {

  const valid = await check();
  if (valid) {
    try {
      let data = { ...formData };
      await api.save(itemId, data);
      proxy.$modal.msgSuccess("保存成功");
      emit('sub');
      close();
    } catch (e) {
      console.error(e);
      proxy.$modal.alert('保存异常');
    }
  }

}

defineExpose({
  open
})


</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.avatar-uploader {
  width: 80px;
  height: 80px;
  background-color: #fff;
  border-radius: 2px;
  border: 1px dashed #d9dbde;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
}
</style>
